<template>
  <div class="shuzijiaoyi">
    <div style="height: 49%">
      <div
        v-if="$store.state.orgType == 0 || $store.state.orgType == 1"
        style="width: 100%; height: 100%"
      >
        <Szjjsecongpagezongyuzidialog style="width: 100%; height: 100%" />
      </div>
      <div v-else style="width: 100%; height: 100%">
        <Szjjsecongpagefencompanydialog style="width: 100%; height: 100%" />
      </div>
    </div>
    <div
      class="bottomdiv"
      v-if="$store.state.orgType == 0 || $store.state.orgType == 1"
    >
      <!-- //集团采购详情  采购完成情况 -->
      <div class="bottomdivsmall">
        <div class="maindivsamll">
          <div class="szjytitle">
            <div class="szjytitletext"></div>
            <p>集团采购详情</p>
            <div class="myselectimgjyzx">
              <Select
                v-model="jtcgxqselectvalue"
                placeholder="请选择"
                @visible-change="mouseClick"
              >
                <i slot="prefix" class="el-input__icon" />
                <el-option
                  v-for="item in $store.state.unitlistarr"
                  :key="item.orgcode"
                  :label="item.orgname"
                  :value="item.orgcode"
                >
                </el-option>
              </Select>
            </div>
            <div class="myselectimgjyzx">
              <Select
                v-model="jtcgxqsecondmyselectimg"
                placeholder="请选择"
                @visible-change="mouseClick"
              >
                <i slot="prefix" class="el-input__icon" />
                <el-option
                  v-for="item in $store.state.projectlistarr"
                  :key="item.object"
                  :label="item.title"
                  :value="item.object"
                >
                </el-option>
              </Select>
            </div>
            <!-- <div class="jiantoudatepiacker">
              <YYDatePick
                ref="datePick1"
                v-model="myzbjedatepicker"
                type="year" 
                arrow 
              ></YYDatePick>
            </div>  -->
            <div class="style1">
              <dataPicker
                v-model="myzbjedatepicker"
                type="year"
                value-format="yyyy"
                placeholder="请选择"
                :editable="false"
                prefix-icon="1"
              />
            </div>
          </div>
          <div class="szjyleftbottomechartheight">
            <div class="szjyleftbottomechartheightsmall">
              <div class="topdetail1 szjyleftbottomechartheightsmalltopdetail1">
                <div>
                  <p class="fontstyle1" id="ljcgje">
                    {{ szjymesinfo.ljcgje || 0 }}
                  </p>
                  <div class="gridimgmoney"></div>
                  <p class="fontstyle2">累计采购金额</p>
                </div>
              </div>
              <div class="topdetail1 szjyleftbottomechartheightsmalltopdetail1">
                <div>
                  <p class="fontstyle1" id="ljcgbs">
                    {{ szjymesinfo.ljcgbs || 0 }}
                  </p>
                  <div class="gridimg"></div>
                  <p class="fontstyle2">累计采购笔数</p>
                </div>
              </div>
            </div>
            <div style="width: 73%; height: 100%">
              <Echart
                ref="szjyjtcgxqoptions1"
                id="cgxqdetailechatrs"
                :options="szjyjtcgxqoptions"
                height="100%"
                width="100%"
              ></Echart>

              <div class="lengend1">
                <div class="lengend1small" style="">
                  <div class="lengend1smalldiv" style=""></div>
                  <p style="font-size: 0.8rem">累计采购金额</p>
                </div>
                <div class="lengend2" style="">
                  <div class="lengend2small"></div>
                  <p style="font-size: 0.8rem">累计采购笔数</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100%; width: 50%; position: relative">
        <div class="maindivsamll">
          <div class="szjytitle">
            <div class="szjytitletext"></div>
            <p>采购完成情况</p>
            <div class="myselectimgjyzx">
              <Select
                v-model="cgwcqkselectvalue"
                placeholder="请选择"
                @visible-change="mouseClick"
              >
                <i slot="prefix" class="el-input__icon" />
                <el-option
                  v-for="item in $store.state.unitlistarr"
                  :key="item.orgcode"
                  :label="item.orgname"
                  :value="item.orgcode"
                >
                </el-option>
              </Select>
            </div>
            <!-- <div class="jiantoudatepiacker">
              <YYDatePick
                v-model="cgwcqkmyzbjedatepicker"
                :to-body="false"
                type="year"
                arrow
              ></YYDatePick>
            </div> -->
            <div class="style1">
              <dataPicker
                v-model="cgwcqkmyzbjedatepicker"
                type="year"
                value-format="yyyy"
                placeholder="请选择"
                :editable="false"
                prefix-icon="1"
              />
            </div>
            <!-- <div class="datepicker">
              <el-date-picker
                value-format="yyyy"
                :editable="false"
                v-model="cgwcqkmyzbjedatepicker"
                type="year"
                placeholder="选择日期"
                prefix-icon=""
                clearable
              ></el-date-picker>
            </div> -->
          </div>
          <div style="height: 90%; display: flex">
            <div style="height: 100%; width: 30%; position: relative">
              <div
                style="
                  width: 100%;
                  position: absolute;
                  top: 35%;
                  left: 0rem;
                  display: flex;
                  justify-content: space-around;
                  z-index: 4;
                "
              >
                <div
                  style="height: 100%; text-align: center; position: relative"
                  @mouseenter="szjjmouseenter"
                  @mouseout="szjjmouseout"
                >
                  <div
                    v-if="isshow"
                    style="
                      padding-left: 5px;
                      background-color: white;
                      border-radius: 10px;
                      position: absolute;
                      top: 20%;
                      bottom: 10%;
                      left: 107%;
                      width: 338px;
                      font-size: 17px;
                      display: flex;
                      align-items: center;
                      border: 1px solid;
                    "
                    id="szjjmouseshijian"
                  >
                    采购完成率 = 采购完成条数 / 采购方案条数
                  </div>
                  <p
                    style="font-size: 2.7rem; cursor: pointer"
                    class="fontstyle"
                    id="cgwcltextrate"
                  >
                    {{ wclrate || 0 }}
                  </p>
                  <p
                    style="
                      background-color: #192c55;
                      border-radius: 1rem;
                      color: #fff;
                      font-size: 0.95rem;
                      padding: 0.25rem;
                      cursor: pointer;
                    "
                  >
                    采购完成率
                  </p>
                </div>
              </div>
              <Echart
                ref="cgwcqkbingechatrs1"
                id="cgwcqkbingechatrs"
                :options="cgwcqkbingechatrsoptions"
                height="100%"
                width="100%"
              ></Echart>
            </div>
            <div style="height: 100%; width: 70%">
              <Echart
                ref="cgwcqklineechatrs1"
                id="cgwcqklineechatrs"
                :options="szjycgwcoptions"
                height="100%"
                width="100%"
              ></Echart>
              <div class="lenged3">
                <div class="lenged3small">
                  <div class="lenged3smalldiv" style=""></div>
                  &nbsp;<span style="font-size: 0.8rem">采购方案/条</span>
                </div>
                <div class="lenged3small">
                  <div
                    class="lenged3smalldiv"
                    style="background-color: #0db0ff"
                  ></div>
                  &nbsp;<span style="font-size: 0.8rem">采购完成/条</span>
                </div>
                <div class="lenged3small">
                  <div class="lenged3smalldiv mainwanchegnlv" style=""></div>
                  &nbsp;<span style="font-size: 0.8rem">完成率</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomdiv" v-else>
      <!-- //集团采购详情  采购完成情况 -->
      <div class="bottomdivsmall">
        <div class="maindivsamll">
          <div class="szjytitle">
            <div class="szjytitletext"></div>
            <p>集团采购详情</p>
            <div class="myselectimgjyzx">
              <Select v-model="jtcgxqsecondmyselectimg" placeholder="请选择">
                <i slot="prefix" class="el-input__icon" />
                <el-option
                  v-for="item in $store.state.projectlistarr"
                  :key="item.object"
                  :label="item.title"
                  :value="item.object"
                >
                </el-option>
              </Select>
            </div>
            <!-- <div class="jiantoudatepiacker">
              <YYDatePick
                v-model="myzbjedatepicker"
                :to-body="false"
                type="year"
                arrow
              ></YYDatePick>
            </div> -->
            <div class="style1">
              <dataPicker
                v-model="myzbjedatepicker"
                type="year"
                value-format="yyyy"
                placeholder="请选择"
                :editable="false"
                prefix-icon="1"
              />
            </div>
            <!-- <div class="datepicker">
              <el-date-picker
                value-format="yyyy"
                :editable="false"
                v-model="myzbjedatepicker"
                type="year"
                placeholder="选择日期"
                prefix-icon=""
                clearable
              ></el-date-picker>
            </div> -->
          </div>
          <div class="szjyleftbottomechartheight">
            <div class="szjyleftbottomechartheightsmall">
              <div class="topdetail1 szjyleftbottomechartheightsmalltopdetail1">
                <div>
                  <p class="fontstyle1" id="ljcgje">
                    {{ szjymesinfo.ljcgje || 0 }}
                  </p>
                  <div class="gridimgmoney"></div>
                  <p class="fontstyle2">累计采购金额</p>
                </div>
              </div>
              <div class="topdetail1 szjyleftbottomechartheightsmalltopdetail1">
                <div>
                  <p class="fontstyle1" id="ljcgbs">
                    {{ szjymesinfo.ljcgbs || 0 }}
                  </p>
                  <div class="gridimg"></div>
                  <p class="fontstyle2">累计采购笔数</p>
                </div>
              </div>
            </div>
            <div style="width: 73%; height: 100%">
              <Echart
                ref="szjyjtcgxqoptions2"
                id="cgxqdetailechatrs"
                :options="szjyjtcgxqoptions"
                height="100%"
                width="100%"
              ></Echart>

              <div class="lengend1">
                <div class="lengend1small" style="">
                  <div class="lengend1smalldiv" style=""></div>
                  <p style="font-size: 0.8rem">累计采购金额</p>
                </div>
                <div class="lengend2" style="">
                  <div class="lengend2small"></div>
                  <p style="font-size: 0.8rem">累计采购笔数</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100%; width: 50%; position: relative">
        <div class="maindivsamll">
          <div class="szjytitle">
            <div class="szjytitletext"></div>
            <p>采购完成情况</p>
            <!-- <div class="jiantoudatepiacker">
              <YYDatePick
                v-model="cgwcqkmyzbjedatepicker"
                :to-body="false"
                type="year"
                arrow
              ></YYDatePick>
            </div> -->
            <div class="style1">
              <dataPicker
                v-model="cgwcqkmyzbjedatepicker"
                type="year"
                value-format="yyyy"
                placeholder="请选择"
                :editable="false"
                prefix-icon="1"
              />
            </div>
            <!-- <div class="datepicker">
              <el-date-picker
                value-format="yyyy"
                :editable="false"
                v-model="cgwcqkmyzbjedatepicker"
                type="year"
                placeholder="选择日期"
                prefix-icon=""
                clearable
              ></el-date-picker>
            </div> -->
          </div>
          <div style="height: 90%; display: flex">
            <div style="height: 100%; width: 30%; position: relative">
              <div
                style="
                  width: 100%;
                  position: absolute;
                  top: 5rem;
                  left: 0rem;
                  display: flex;
                  justify-content: space-around;
                  z-index: 4;
                "
              >
                <div
                  style="height: 100%; text-align: center; position: relative"
                  @mouseenter="szjjmouseenter"
                  @mouseout="szjjmouseout"
                >
                  <div
                    v-if="isshow"
                    style="
                      padding-left: 5px;
                      background-color: white;
                      border-radius: 10px;
                      position: absolute;
                      top: 20%;
                      bottom: 10%;
                      left: 107%;
                      width: 338px;
                      font-size: 17px;
                      display: flex;
                      align-items: center;
                      border: 1px solid;
                    "
                    id="szjjmouseshijian"
                  >
                    采购完成率 = 采购完成条数 / 采购方案条数
                  </div>
                  <p
                    style="font-size: 2.7rem; cursor: pointer"
                    class="fontstyle"
                    id="cgwcltextrate"
                  >
                    {{ wclrate || 0 }}
                  </p>
                  <p
                    style="
                      background-color: #192c55;
                      border-radius: 1rem;
                      color: #fff;
                      font-size: 0.95rem;
                      padding: 0.25rem;
                      cursor: pointer;
                    "
                  >
                    采购完成率
                  </p>
                </div>
              </div>
              <Echart
                ref="cgwcqkbingechatrs2"
                id="cgwcqkbingechatrs"
                :options="cgwcqkbingechatrsoptions"
                height="100%"
                width="100%"
              ></Echart>
            </div>
            <div style="height: 100%; width: 70%">
              <Echart
                ref="cgwcqklineechatrs2"
                id="cgwcqklineechatrs"
                :options="szjycgwcoptions"
                height="100%"
                width="100%"
              ></Echart>
              <div class="lenged3">
                <div class="lenged3small">
                  <div class="lenged3smalldiv" style=""></div>
                  &nbsp;采购方案/条
                </div>
                <div class="lenged3small">
                  <div
                    class="lenged3smalldiv"
                    style="background-color: #0db0ff"
                  ></div>
                  &nbsp;采购完成/条
                </div>
                <div class="lenged3small">
                  <div
                    class="lenged3smalldiv"
                    style="
                      height: 3px;
                      background: linear-gradient(
                        90deg,
                        #ffc346,
                        #b3001e,
                        #ffc346
                      );
                    "
                  ></div>
                  &nbsp;完成率
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import Selectszjy from "@/components/selectszjy.vue";
import CommonTable from "@/components/tablemain.vue";
import Szjjsecongpagefencompanydialog from "@/components/szjjsecongpagefencompanydialog.vue";
import Szjjsecongpagezongyuzidialog from "@/components/szjjsecongpagezongyuzidialog.vue";
import Szjythirdshuzi from "@/components/szjythirdshuzi.vue";
import Dialog from "@/components/dialog.vue";
import { yearDate } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import { Message } from "element-ui";
import Echart from "@/common/echart";
import * as echarts from "echarts";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";

export default {
  name: "szjydialog",
  components: {
    Selectszjy,
    CommonTable,
    Echart,
    Szjjsecongpagefencompanydialog,
    Szjjsecongpagezongyuzidialog,
    Dialog,
    Szjythirdshuzi,
    YYDatePick,
    dataPicker,
    Select,
  },
  props: {},
  watch: {
    jtcgxqselectvalue(newval, oldval) {
      if (!newval) {
        return;
      }
      this.getbuyingSituationAnalysis(1);
    },
    jtcgxqsecondmyselectimg(newval, oldval) {
      if (!newval) {
        return;
      }
      this.getbuyingSituationAnalysis(1);
    },
    myzbjedatepicker(newval, oldval) {
      if (!newval) {
        this.myzbjedatepicker = yearDate();
      }
      this.getbuyingSituationAnalysis(1);
    },
    cgwcqkselectvalue(newval, oldval) {
      if (!newval) {
        return;
      }
      this.getbuyingAccomplishAnalysis(1);
    },
    cgwcqkmyzbjedatepicker(newval, oldval) {
      if (!newval) {
        this.cgwcqkmyzbjedatepicker = yearDate();
      }
      this.getbuyingAccomplishAnalysis(1);
    },
  },
  data() {
    return {
      cgwcqkselectvalue: "999",
      myzbjedatepicker: yearDate(),
      cgwcqkmyzbjedatepicker: yearDate(),
      jtcgxqselectvalue: "999",
      jtcgxqsecondmyselectimg: "0",
      isshow: false,
      cgwcqkbingechatrsoptions: {},
      szjycgwcoptions: {},
      szjythirdpopvisiable: false,
      poptitle: "",
      radiovalue: 1,
      szjyjtcgxqoptions: {},
      szjymesinfo: { ljcgje: 0, ljcgbs: "" },
      wclrate: "",
    };
  },
  mounted() {
    this.getbuyingSituationAnalysis(2);
    this.getbuyingAccomplishAnalysis(2);
  },
  methods: {
    returnFloat(num) {
      console.log(num, "num");
      num = (parseInt(num * 100) / 100).toFixed(2);
      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    getbuyingSituationAnalysis(num) {
      let linexValue = [];
      let baryvalue1 = [];
      let lineyvalue = [];
      let data = {};
      let stylelabel = {};
      if (this.jtcgxqselectvalue != "999") {
        data["orgCode"] = this.jtcgxqselectvalue;
      }
      if (this.jtcgxqsecondmyselectimg != "0") {
        data["type"] = this.jtcgxqsecondmyselectimg;
      }
      APIS.Szjy.buyingSituationAnalysis({
        year: this.myzbjedatepicker,
        ...data,
      }).then((res) => {
        console.log(res, "res");

        // this.szjymesinfo.ljcgje = (res.data.totalPrice / 100000000).toFixed(2);

        this.szjymesinfo.ljcgje = this.returnFloat(
          res.data.totalPrice / 100000000
        );

        console.log((res.data.totalPrice - 0) / 100000000, "00000000");

        this.szjymesinfo.ljcgbs = res.data.num;
        res.data.chart.map((item) => {
          linexValue.push(item.month || item.year);
          item.totalPrice = item.totalPrice - 0;
          // item.totalPrice = (item.totalPrice / 100000000).toFixed(2);
          item.totalPrice = this.returnFloat(item.totalPrice / 100000000);
          baryvalue1.push(item.totalPrice);
          lineyvalue.push(item.num - 0);
        });

        if (num == 1) {
          let myChart = echarts.init(
            document.getElementById("cgxqdetailechatrs")
          );
          myChart.setOption({
            xAxis: {
              data: linexValue,
              axisLabel: stylelabel,
            },
            series: [
              {
                data: baryvalue1,
              },
              {
                data: lineyvalue,
              },
            ],
          });
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        } else {
          this.renderszjyjtcgxqoptions(
            linexValue,
            baryvalue1,
            lineyvalue,
            stylelabel
          );
        }
      });
    },
    getbuyingAccomplishAnalysis(num) {
      let data = {};
      let wclinexValue = [];
      let wcbaryvalue1 = [];
      let wcbaryvalue2 = [];
      let wclineyvalue = [];

      if (this.cgwcqkmyzbjedatepicker) {
        data["year"] = this.cgwcqkmyzbjedatepicker;
      }
      if (this.cgwcqkselectvalue != "999") {
        data["orgCode"] = this.cgwcqkselectvalue;
      }
      APIS.Szjy.buyingAccomplishAnalysis({ ...data }).then((res) => {
        for (let key in res.data.chart) {
          wclinexValue.push(res.data.chart[key].MONTH);
          wcbaryvalue1.push(res.data.chart[key].schemeNum);
          wcbaryvalue2.push(res.data.chart[key].accomplishNum);
          wclineyvalue.push(res.data.chart[key].ratio);
        }
        let cgwcbingecharts = "";
        if (res.data.ratio) {
          cgwcbingecharts = res.data.ratio + "%";
          this.wclrate = res.data.ratio + "%";
        } else {
          cgwcbingecharts = "0%";
          this.wclrate = "0%";
        }

        if (num == 1) {
          let myChart = echarts.init(
            document.getElementById("cgwcqkbingechatrs")
          );
          myChart.setOption({
            series: [
              {
                data: [
                  {
                    //上层圆环，显示数据
                    value: parseInt(this.wclrate.slice(0, -1)),
                  },
                ],
              },
            ],
          });
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          let myChart1 = echarts.init(
            document.getElementById("cgwcqklineechatrs")
          );
          myChart1.setOption({
            xAxis: {
              data: wclinexValue,
            },
            series: [
              {
                data: wcbaryvalue1,
              },
              {
                data: wcbaryvalue2,
              },
              {
                data: wclineyvalue,
              },
            ],
          });
          window.addEventListener("resize", function () {
            myChart1.resize();
          });
        } else {
          this.rendercgwcqkbingechatrsoptions(cgwcbingecharts);
          this.renderszjycgwcoptions(
            wclinexValue,
            wcbaryvalue1,
            wcbaryvalue2,
            wclineyvalue
          );
        }
      });
    },
    szjjmouseenter() {
      this.isshow = true;
    },
    szjjmouseout() {
      this.isshow = false;
    },
    renderszjycgwcoptions(linexValue, baryvalue1, baryvalue2, lineyvalue) {
      this.szjycgwcoptions = {
        // legend: {
        // 	bottom: '0%',
        // 	left: 'center',

        // },
        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = params[0].name + "月" + "<br>";
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesName == "完成率") {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background: linear-gradient( 90deg,  #ffc346, #b3001e, #ffc346 );"></span>';
                html += params[i].seriesName + ":" + params[i].value + "%<br>";
              } else {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>';
                html += params[i].seriesName + ":" + params[i].value + "<br>";
              }
              // if (params[i].value) {
              //   html +=
              //     '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
              //     params[i].color +
              //     ';"></span>';
              //   if (params[i].seriesName == "完成率") {
              //     html += params[i].seriesName + ":" + params[i].value + "%";
              //   } else {
              //     html += params[i].seriesName + ":" + params[i].value + "<br>";
              //   }
              // }
            }
            return html;
          },
        },
        xAxis: {
          type: "category",
          data: linexValue,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#393939",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "采购方案/条",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#182c56",
              },
            },
            data: baryvalue1,
          },
          {
            name: "采购完成/条",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#0DB0FF",
              },
            },
            data: baryvalue2,
          },
          {
            name: "完成率",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true,
            showSymbol: false,
            // showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 1, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "white",
              borderWidth: "2",
              borderColor: "#5470c6",
            },
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#ffc346",
                }, // %0的颜色值
                {
                  offset: 0.3,
                  color: "#b3001e",
                }, // 100%的颜色值
                {
                  offset: 1,
                  color: "#ffc346",
                }, // 100%的颜色值
              ]),
            },
            data: lineyvalue,
            // #ffc346, #b3001e, #ffc346
          },
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.cgwcqklineechatrs1.resize();
        tast.$refs.cgwcqklineechatrs2.resize();
      });
    },
    rendercgwcqkbingechatrsoptions(rate) {
      const num = Number(rate.split("%")[0]);
      this.cgwcqkbingechatrsoptions = {
        polar: {
          radius: ["85%", "90%"],
          center: ["50%", "50%"],
        },

        angleAxis: {
          max: 100, //最大刻度
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          // 外圈
          // {
          //   data: [{ show: false, value: "100" }], //作用不清楚
          //   name: "灰色内圈", //刻度背景
          //   type: "pie",
          //   radius: "99%",
          //   startAngle: "0",
          //   endAngle: "-359.99",
          //   clockWise: false, //顺时加载
          //   hoverAnimation: false, //鼠标移入变大
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 2, //设置边框粗细
          //       borderColor: "#182c56", //边框颜色
          //       color: "#e4e8f2",
          //     },
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: false,
          //   },
          //   pointer: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   detail: {
          //     show: 0,
          //   },
          // },
          {
            name: "上层绿环",
            data: [
              {
                // value: parseInt(rate.slice(0, -1)),
                value: num,
              },
            ],
            z: 9,
            radius: "90%",
            type: "bar",
            roundCap: true,
            barWidth: 8,
            showBackground: true,
            backgroundStyle: {
              color: "#cfddf7",
            },
            coordinateSystem: "polar",
            // 样式-颜色
            itemStyle: {
              normal: {
                color: "#182c56",
              },
            },
          },

          // 	{
          // 	name: '上层绿环',
          // 	type: 'bar',
          // 	data: [{
          // 		//上层圆环，显示数据
          // 		value: parseInt(rate.slice(0, -1)),
          // 		name: ' ',
          // 		itemStyle: {
          // 			color: 'red'
          // 		}
          // 	}],
          // 	barGap: '-100%', //柱间距离,上下两层圆环重合
          // 	coordinateSystem: 'polar',
          // 	roundCap: true, //顶端圆角从 v4.5.0 开始支持
          // 	z: 2
          // }
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.cgwcqkbingechatrs1.resize();
        tast.$refs.cgwcqkbingechatrs2.resize();
      });
    },
    renderszjyjtcgxqoptions(linexValue, baryvalue1, lineyvalue, style) {
      if (baryvalue1.length > 12) {
        style = {
          show: true,
          interval: 0,
          rotate: "45",
          textStyle: {
            color: "#393939",
          },
        };
      } else {
        style = {
          show: true,
          interval: 0,
          rotate: "0",
          textStyle: {
            color: "#393939",
          },
        };
      }

      this.szjyjtcgxqoptions = {
        grid: {
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            let html = params[0].name + "月<br>";
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesName == "累计采购笔数") {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background: linear-gradient( 90deg,  #ffc346, #b3001e, #ffc346 );"></span>';
                html += params[i].seriesName + ":" + params[i].value + "<br>";
              } else {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#182c56;"></span>';
                html +=
                  params[i].seriesName + ":" + params[i].value + "亿元<br>";
              }
            }
            return html;
          },
        },
        xAxis: {
          type: "category",
          data: linexValue,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: style,
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "累计采购金额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#182c56",
              },
            },
            data: baryvalue1,
          },
          {
            name: "累计采购笔数",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true,
            showSymbol: false,
            // showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 1, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "white",
              borderWidth: "2",
              borderColor: "#5470c6",
            },
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#ffc346",
                }, // %0的颜色值
                {
                  offset: 0.5,
                  color: "#b3001e",
                }, // 100%的颜色值
                {
                  offset: 1,
                  color: "#ffc346",
                }, // 100%的颜色值
              ]),
            },
            data: lineyvalue,
          },
        ],
      };
      const tast = this;
      window.addEventListener("resize", function () {
        tast.$refs.szjyjtcgxqoptions1.resize();
        tast.$refs.szjyjtcgxqoptions2.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.shuzijiaoyi {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  overflow: hidden;
  font-size: 1rem;

  .lengend1 {
    height: 5%;
    display: flex;
    align-items: center;
    margin-left: 14%;
    font-size: 18px;
    .lengend1small {
      display: flex;
      align-items: center;
      margin-right: 1%;
      .lengend1smalldiv {
        width: 1.15rem;
        height: 0.5rem;
        background-color: #182c56;
        border-radius: 2px;
      }
    }
  }
  .lengend2 {
    display: flex;
    align-items: center;
    .lengend2small {
      width: 1.15rem;
      height: 0.15rem;
      background: linear-gradient(90deg, #ffc346, #b3001e, #ffc346);
      border-radius: 2px;
    }
  }

  .lenged3 {
    width: 46%;
    margin-left: 30%;
    position: absolute;
    bottom: -0.7rem;
    left: 14%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    .lenged3small {
      display: flex;
      align-items: center;
      .lenged3smalldiv {
        width: 1.15rem;
        height: 0.5rem;
        background-color: #182c56;
        border-radius: 0.1rem;
        font-size: 0.8rem;
      }
    }
  }
  .bottomdiv {
    height: 49%;
    display: flex;
    .bottomdivsmall {
      height: 100%;
      width: 50%;
    }
  }
  .szjyleftbottomechartheight {
    height: 90%;
    display: flex;
    justify-content: space-around;
    .szjyleftbottomechartheightsmall {
      padding-top: 8%;
      padding-left: 2%;
      .szjyleftbottomechartheightsmalltopdetail1 {
        width: 100%;
        height: 37%;
      }
    }
  }
  .mainbigtopdiv2 {
    width: 98%;
    height: 20%;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border: 0.05rem solid #192c55;
    margin: 0 auto;
    border-radius: 0.25rem;
    margin-top: 5%;
    margin-bottom: 3%;
    .topdetail2 {
      height: 100%;
      width: 15%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .topdetail2div {
        height: 100%;
      }
    }
  }
  .leftleft {
    height: 52%;
    width: 98%;
    display: flex;
    margin: 0 auto;
    .mainbigtopdiv {
      width: 45%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      border: 0.05rem solid #192c55;
      border-radius: 0.25rem;
      padding-top: 3%;
      padding-bottom: 3%;
      box-sizing: border-box;
      .shuzijiaoyilefttop {
        font-size: 0.75rem;
        height: 50%;
        width: 50%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #192c55;
        margin-right: 0.25rem;
        background: rgba(25, 44, 85, 0.2);
        border-radius: 0 0 0.25rem 0.25rem;
      }
      .shuzijiaoyilefttopbg {
        background-color: #162a54;
        color: white;
      }
      .topdetail1 {
        height: 50%;
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .topdetail2div {
          height: 100%;
        }
      }
    }
  }
  .maindivsamll {
    width: 100%;
    height: 100%;
    .szjytitle {
      display: flex;
      align-items: center;
      .szjytitletext {
        width: 0px;
        height: 0.95rem;
        border: 0.1rem solid #192c55;
        margin-right: 0.25rem;
      }
    }
  }
}
::v-deep .myselectimgjyzx {
  width: 7rem;
  margin-left: 0.5rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 0.9rem) !important;
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url("@/assets/yellowdownsanjiao.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    margin-left: calc(100% - 0.9rem) !important;
    transform: translate(-50%, -53%);
  }
  .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 0.6rem);
  }
  .el-select .el-input .el-select__caret {
    color: #192c55;
  }
  .el-icon-arrow-up:before {
    content: "";
  }
}
::v-deep .style1 {
  height: 1.4rem;
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.5rem) !important;
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    display: none;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 8rem;
    height: 1.2rem;
  }
}
</style>
